<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>对比统计</title>

<link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/ecalendar.css">
<link href="/css/vendor/comparative-statistics.less" rel="stylesheet/less" type="text/css">
<script src="/js/less.min.js"></script>

<style>

</style>

</head>

<body>
<main>
	<ul class="nav-bar">
	    <li class="button" select>里程/架次对比</li>
        <li class="button">飞机类型对比</li>
	</ul>
	
	<div id="flight-comparative" class="content-wrap">
        <div class="filter-wrap">
            <p class="title">最近:</p>
            <input type='radio' name='flight-date' value='year' id='year0' style='margin-left: 55px;'><label for='year0'>按年</label>
            <input type='radio' name='flight-date' value='month' id='month0'><label for='month0'>按月</label>
            <input type='radio' name='flight-date' value='day' id='day0' checked><label for='day0'>按日</label>
            
            <p class="title" style="margin-left: 90px;">飞机类型:</p>
            <select>
                <option>F300</option>
                <option>F200</option>
                <option selected>F1000</option>
                <option>D200</option>
                <option>Phantom4</option>
            </select>

            <p class='clear-btn button' onClick='clickFlightStatisticsClearBtn()'>重 置</p>
            <p class="title time-interval">时间区间:</p>
            
            <input type="e-date" value="开 始">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
            <input type="e-date" value="结 束">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
        </div>

        <div class="canvas-wrap">
            <canvas id='flight-chart'></canvas>
            <img class="move-left-btn button" src="/images/statistics/comparative-statistics-pre.png">
            <img class="move-right-btn button" src="/images/statistics/comparative-statistics-pre.png">
            
            <table>
                <tr>
                    <td><label class="miles"></label>里程</td>
                    <td><label class="flight-cnt"></label>架次</td>
                </tr>
            </table>
        </div>
	</div>
	
	<div id="drone-type-comparative" class="content-wrap remove">
        <div class="filter-wrap">
            <p class="title">最近:</p>
            <input type='radio' name='drone-type-date' value='year' id='year1' style='margin-left: 55px;'><label for='year1'>按年</label>
            <input type='radio' name='drone-type-date' value='month' id='month1' checked><label for='month1'>按月</label>
            <input type='radio' name='drone-type-date' value='day' id='day1'><label for='day1'>按日</label>

            <input type='radio' name='flight-count-or-miles' value='count' id='filter-flight-count' checked style='margin-left: 80px;'><label for='filter-flight-count'>按架次</label>
            <input type='radio' name='flight-count-or-miles' value='miles' id='filter-flight-miles'><label for='filter-flight-miles'>按里程</label>

            <p class='clear-btn button' onClick='clickFlightStatisticsClearBtn()'>重 置</p>
            <p class="title time-interval">时间区间:</p>
            
            <input type="e-date" value="开 始">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
            <input type="e-date" value="结 束">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
        </div>

        <div class="canvas-wrap">
            <canvas id='drone-type-chart'></canvas>
            <img class="move-left-btn button" src="/images/statistics/comparative-statistics-pre.png">
            <img class="move-right-btn button" src="/images/statistics/comparative-statistics-pre.png">
        </div>
        
        <div class="drone-wrap">
            <ul id="drone-type-comparative-drone-list">
                <li name="F300"><div class="item f300">
                        <div class="title">F300</div>
                        <img src="/images/statistics/f300.png">
                </div></li>
                <li name="F200" checked><div class="item f200">
                        <div class="title">F200</div>
                        <img src="/images/statistics/f200.png">
                </div></li>
                <li name="F1000" checked><div class="item f1000">
                        <div class="title">F1000</div>
                        <img src="/images/statistics/f1000.png">
                </div></li>
                <li name="D200"><div class="item d200">
                        <div class="title">D200</div>
                        <img src="/images/statistics/d200.png">
                </div></li>
                <li name="Phantom4"><div class="item phantom4">
                        <div class="title">Phantom4</div>
                        <img src="/images/statistics/phantom4.png">
                </div></li>
            </ul>
        </div>
	</div>
</main>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/chart-polygon-flight.js" type="text/javascript" ></script>
<script src="/js/vendor/comparative-statistics.js"></script>

<script>
	// 测试数据
    var milesData = [2, 5, 6, 19, 11, 17, 10, 6, 12, 10, 29, 12, 2, 5, 6, 19, 11, 17, 10, 6, 12, 10, 29, 12, 17, 11, 24, 20, 27, 17, 166];
    var flightCntData = [1, 1, 1.5, 1.8, 1, 4.6, 3.1, 4, 3, 1, 7, 2.5, 1, 1, 1.5, 1.8, 1, 4.6, 3.1, 4, 3, 1, 7, 2.5, 4, 3, 5, 8, 4, 10, 50];
    var dateData = ["2015-01-30", "2015-02-26", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10-25", "2015-11-16", "2015-12", "2016-01", "2016-02", "2016-03", "2016-04", "2016-05", "2016-06", "2016-07", "2016-08", "2016-09", "2016-10", "2016-11", "2016-12", "2017-01", "2017-02", "2017-03", "2017-04", "2017-05-16", "2017-06-08", "2017-07-02"];

    var paramList = [{data:milesData, fillColor:"rgba(139, 124, 225, 0.5)", strokeColor:"rgb(139, 124, 225)"},
                     {data:flightCntData, fillColor:"rgba(234, 65, 72, 0.5)", strokeColor:"rgb(234, 65, 72)"}];
    var flightChart = new PolygonChart();
    flightChart.cfg.windowWidthOffset = 120;
    flightChart.cfg.windowHeightOffset = 230;
    flightChart.cfg.verUnitName = "(单位: 架次)";
    flightChart.init("flight-chart").update(dateData, paramList);
    
    
    var demoDataList = new Array();
    for (var i = 0; i < 6; i++) {
        var list = new Array();
        for (var j = 0; j < flightCntData.length; j++) {
            var newData = flightCntData[j] + 100 - i * 15;
            list.push(newData);
        }
        demoDataList.push(list);
    }
    
    var droneTypeChart = new PolygonChart();
    droneTypeChart.cfg.verUnitName = "(单位: X1000KM)";
    droneTypeChart.init("drone-type-chart");//.update(null, null);
    
    // 飞机类型对比 飞机类型改变
    comparativeStatisticsM.droneTypeComparativeDroneTypeChanged = function (checkedDroneList) {
        console.log(checkedDroneList);
        
        var pList = new Array();
        for (var i = 0; i < checkedDroneList.length; i++) {
            var item = checkedDroneList[i];
            var p = {data:demoDataList[i], fillColor:item.fillColor, strokeColor:item.strokeColor};
            pList.push(p);
        }
        droneTypeChart.update(dateData, pList);
    };

    var checkedList = comparativeStatisticsM.droneTypeComparativeDroneCheckedList();
    console.log(checkedList);
</script>

</html>






